<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="UTF-8">
	<!-- disable iPhone Android inital scale , initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no -->
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> -->
	<meta name="viewport" content="width=480,user-scalable=no,target-densitydpi=high-dpi">
	<meta name="oupengmobile" content="game,fullscreen,lockrotation,landscape">
	<meta name="tencent-x5-page-direction" content="landscape">
	<meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 关闭Android/iPhone浏览器自动识别数字为电话号码-->
    <meta name="format-detection" content="telephone=no">
    
	<title>Scroller Demo</title>
	<link href="../../css/lib/html5_reset.css" rel="stylesheet"/>
	<link href="../../css/lib/module.css" rel="stylesheet"/>
	<link href="css/layout.css" rel="stylesheet"/>
	<style type="text/css"></style>
    <script>
    </script>
	</head>
	<body>
	    <section id="wrap" class="flexbox_vertical">
	        <header id="header">
                <ul id="scroller_nav">
                    <li><a>verticals</a></li><li><a>horizontal</a></li><li><a>pagingX</a></li><li><a>pagingY</a></li>
                </ul>
            </header>
	        <div id="content" class="scroller_container flexbox_v1"></div>
	        <footer id="footer">
                <div id="console"></div> 
            </footer>
	    </section>
	</body>
	<script src="../../js/lib/jquery_1.7.2.js"></script>
	<script src="../../root/backbone/js/lib/underscore.js"></script>
	<script src="../../root/backbone/js/lib/backbone.js"></script>
    <!-- scroller lib -->
	<script src="./js/lib/Animate.js"></script>
	<script src="./js/lib/Raf.js"></script>
	<script src="./js/lib/Scroller.js"></script>
	<!-- scroller lib -->
	<script src="../../js/VCM.js"></script>
	<script src="./js/index.js"></script>
	<script>
        document.addEventListener("DOMContentLoaded", function() {
            //VCM.debug(VCM.browser.chrome,$("#content"),$("#content")[0].clientHeight);
            var list = $("#scroller_nav").find("li");
            _.each(list, function(val){ 
                val.addEventListener("click",function(e){
                    setScroller(this.innerText);
                });
            });
        },false)
        window.addEventListener("load",function(){
            setTimeout(function(){
                // $("#wrap").css("height",window.innerHeight+120+"px");
                window.scrollTo(0,1); 
                //window.devicePixelRatio
                // $("#wrap").css("height",window.innerHeight+"px");
                //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
                //alert($("#wrap").css("height")+"|"+window.innerHeight);
                debug("wrap : "+$("#wrap").css("width")+"|"+$("#wrap").css("height"));
                debug("window inner : "+window.innerWidth+"|"+window.innerHeight);
                debug("window.screen : "+window.screen.width+"|"+window.screen.height);
                
            }, 100); 
        },false);
        window.addEventListener("click",function(){
            
        },false);
	</script>
</html>
